<template>
  <div class="password">
    <div class="title">
      <p>密码登录</p>
    </div>
    <div class="form">
      <input
        type="text"
        placeholder="请输入账号/手机号"
        class="phone"
        v-model="phone"
        @blur="blurHandler"
      />
      <div class="password-input">
        <input
          type="password"
          placeholder="请输入密码"
          ref="input"
          v-model="password"
        />
        <svg
          @click="showPassword"
          v-if="!show"
          t="1672041974801"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1566"
          width="200"
          height="200"
        >
          <path
            d="M512 529.188571a665.234286 665.234286 0 0 1-427.885714-143.36 36.571429 36.571429 0 0 1-10.971429-22.308571 32.914286 32.914286 0 0 1 8.045714-23.405714 32.548571 32.548571 0 0 1 45.714286-2.925715c197.851429 170.057143 572.342857 170.057143 768 0a32.182857 32.182857 0 1 1 42.422857 48.64A663.771429 663.771429 0 0 1 512 529.188571z m-117.028571 140.8h-5.851429A32.182857 32.182857 0 0 1 365.714286 658.285714a30.354286 30.354286 0 0 1-4.754286-24.868571l21.211429-125.805714a32.914286 32.914286 0 0 1 36.571428-26.331429 33.645714 33.645714 0 0 1 21.211429 13.165714 34.011429 34.011429 0 0 1 5.485714 24.502857l-21.577143 125.44a31.817143 31.817143 0 0 1-29.257143 25.6z m480.182857-64a31.085714 31.085714 0 0 1-22.674286-9.508571l-105.691429-106.422857a31.817143 31.817143 0 0 1 13.897143-55.222857 32.914286 32.914286 0 0 1 31.817143 10.605714l105.325714 106.422857a31.817143 31.817143 0 0 1 0 44.982857 34.011429 34.011429 0 0 1-23.04 9.142857z m-726.674286 0a33.645714 33.645714 0 0 1-21.211429-9.142857 31.817143 31.817143 0 0 1-9.508571-22.308571 32.914286 32.914286 0 0 1 9.508571-22.674286l105.325715-106.422857a31.451429 31.451429 0 0 1 32.914285-12.8 32.182857 32.182857 0 0 1 24.868572 24.868571 31.451429 31.451429 0 0 1-13.531429 32.548572l-105.691428 106.422857a29.988571 29.988571 0 0 1-23.04 9.508571z m482.011429 64a32.182857 32.182857 0 0 1-31.451429-26.331428l-21.211429-125.44a31.451429 31.451429 0 0 1 8.411429-33.28 30.72 30.72 0 0 1 33.645714-6.582857 31.451429 31.451429 0 0 1 20.114286 27.428571l21.577143 125.805714a32.548571 32.548571 0 0 1-5.12 23.771429 32.914286 32.914286 0 0 1-20.845714 13.165714h-5.12z"
            p-id="1567"
            fill="#515151"
          ></path>
        </svg>
        <svg
          @click="hidPassword"
          v-else
          t="1672041999718"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2122"
          width="200"
          height="200"
        >
          <path
            d="M513.92 446.506667a64 64 0 1 1-64 64 64 64 0 0 1 64-64m0-64a128 128 0 1 0 128 128 128 128 0 0 0-128-128z"
            fill="#515151"
            p-id="2123"
          ></path>
          <path
            d="M512 289.706667c128 0 257.706667 67.84 397.226667 207.146666a21.333333 21.333333 0 0 1 0 30.08C770.133333 666.453333 640 734.293333 512 734.293333s-257.28-67.84-396.8-207.146666a21.333333 21.333333 0 0 1 0-30.08c139.52-139.52 268.8-207.36 396.8-207.36m0-64c-145.92 0-291.84 75.306667-442.453333 225.92a85.333333 85.333333 0 0 0 0 120.746666C220.586667 722.986667 366.506667 798.293333 512 798.293333s292.266667-75.306667 442.666667-225.92a85.333333 85.333333 0 0 0 0-120.746666C804.266667 301.013333 658.346667 225.706667 512 225.706667z"
            fill="#515151"
            p-id="2124"
          ></path>
        </svg>
        <span>忘记密码</span>
      </div>

      <div class="submit" @click="passwordToLogin">登录</div>
      <div class="choose">
        <span @click="$router.push('/login/verification-code')"
          >验证码登录</span
        >
        <span @click="$router.push('/login/register')">用户注册</span>
      </div>
      <div class="codition">
        <span>登录即代表您已同意</span>
        <span @click="$router.push('/privacy')">《用户隐私政策》</span>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
qs;
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  methods: {
    showPassword() {
      this.show = true;
      this.$refs.input.type = "text";
    },
    hidPassword() {
      this.show = false;
      this.$refs.input.type = "password";
    },

    blurHandler() {
      let reg = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/;
      if (!reg.test(this.phone)) {
        console.log("怒符合");
        Toast("请输入正确的手机号码！");
      } else {
        Toast("请输入密码！");
      }
    },
    async passwordToLogin() {
      if (this.password.trim() == "") {
        Toast("密码不能为空！");
      } else {
        let res = await this.axios({
          method: "POST",
          url: "https://m-mall.gxptkc.com/v3/frontLogin/oauth/token",
          data: qs.stringify({
            username: "13679571763",
            password: "13679571763",
            loginType: 1,
          }),
        });
        if (res.data.msg == "成功") {
          localStorage.setItem("fastCar-token", res.data.data.access_token);
          Toast.success("登录成功");
          setTimeout(() => {
            if (this.$route.query.productId) {
              this.$router.push({
                path: "/product",
                query: {
                  goodsId: this.$route.query.goodsId,
                  productId: this.$route.query.productId,
                },
              });
            } else {
              this.$router.push("/own");
            }
          }, 1000);
        } else {
          Toast.fail(res.data.msg);
        }
      }
    },
  },
  data() {
    return {
      show: false,
      password: "",
      phone: "13679571711",
    };
  },
};
</script>
<style lang="scss" scoped>
$color: #eee;
.password {
  box-sizing: border-box;
  padding: 0 10rem;
  display: flex;
  flex-direction: column;
  .title {
    p {
      font-size: 18rem;
      color: #333;
      font-weight: bold;
    }
  }
  .form {
    flex-grow: 1;
    margin-top: 30rem;
    position: relative;
    input {
      border: none;
      font-size: 15rem;
    }
    input.phone {
      width: 100%;
      border-bottom: 1px solid $color;
      padding: 10rem 0;
      //   color: #ccc;
      margin-bottom: 30rem;
    }
    .password-input {
      border-bottom: 1px solid $color;
      padding: 10rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40rem;
      input {
        width: 60%;
      }
      svg {
        width: 25rem;
        height: 25rem;
      }
      span {
        padding-left: 10rem;
        font-size: 15rem;
        color: #2d2d2d;
        border-left: 1px solid $color;
      }
    }
    .submit {
      width: 100%;
      height: 44rem;
      border: none;
      background: linear-gradient(90deg, #fc1f1d, #fd7326);
      border-radius: 22rem;

      color: #fff;
      font-size: 18rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .choose {
      display: flex;
      justify-content: center;
      margin-top: 15rem;
      span {
        font-size: 14rem;
        color: #2d2d2d;
        padding: 0 10rem;
        &:last-child {
          color: #fc1c1c;
          border-left: 1px solid $color;
        }
      }
    }
    .codition {
      width: 100%;
      position: absolute;
      bottom: 30rem;
      display: flex;
      justify-content: center;
      span {
        font-size: 13rem;
        color: #999;
        &:last-child {
          color: #fc1e1e;
        }
      }
    }
  }
}
</style>
